<template>
  <div class="app-container">
    <div class="check-box">
      <el-input
        v-model="deptName"
        placeholder="请输入部门名称"
        clearable
        size="small"
        prefix-icon="el-icon-search"
        style="margin-bottom: 20px"
      />
      <el-row style="max-height: 360px; overflow-y: scroll">
        <el-col :span="12">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </el-col>
        <el-col :span="12">
          <el-table ref="userTable" :data="userList"
                    highlight-current-row
                    @current-change="handleUserChange"
          >
            <el-table-column prop="userName" align="left" label="检验人" />
          </el-table>
        </el-col>
      </el-row>
    </div>

    <div class="dialog-footer">
      <el-button type="primary" @click="okQcPeo">确 定</el-button>
      <el-button @click="cancelQcPeo">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { allUser, deptTreeSelect } from '@/api/system/user'

export default {
  name: 'RuoYiUserTree',
  props: {
    selectedUser: {
      required: true
    }
  },
  data() {
    return {
      userList: [],
      deptName: undefined,
      // 部门树选项
      deptOptions: undefined,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 查询参数
      userQueryParams: {
        userName: undefined,
        phonenumber: undefined,
        status: '0',
        deptId: undefined
      },
      preSelectedUser: {}
    }
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    Promise.all([
      this.getDeptTree(),
      this.getUserList()
    ])
  },
  methods: {
    // 确认检验人
    okQcPeo() {
      this.$emit('update:selectedUser', { ...this.preSelectedUser })
      this.cancelQcPeo()
    },
    // 取消检验人
    cancelQcPeo() {
      this.deptName = undefined
      this.preSelectedUser = {}
      this.$refs.userTable.clearSelection()
      this.$emit('close')
    },
    // 选择检验人
    handleUserChange(val) {
      this.preSelectedUser = val
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.userQueryParams.deptId = data.id
      this.userQueryParams.pageNum = 1
      this.getUserList()
    },
    /** 查询用户列表 */
    async getUserList() {
      const res = await allUser(this.userQueryParams)
      this.userList = res.data
    },
    /** 查询部门下拉树结构 */
    async getDeptTree() {
      const res = await deptTreeSelect()
      this.deptOptions = res.data
    }
  }
}
</script>

<style scoped lang="scss">
.dialog-footer {
  text-align: right;
}
</style>
